<template>
  <w-dialog class="dialog-std" :fullScreen="fullScreen">
    <w-horizontal class="dialog-std-head" height="40">
      <w-dialog-move>
        <w-html class="dialog-std-title" width="*">{{title}}</w-html>
      </w-dialog-move>
      <w-html class="dialog-std-max" width="40" @click="full"><i :class="['f-i', fullScreen ? 'f-i-dialog-restore' : 'f-i-dialog-max']"></i></w-html>
      <w-html class="dialog-std-close" width="40" @click="close"><i class="f-i f-i-close"></i></w-html>
    </w-horizontal>
    <w-vertical height="*" class="dialog-std-body">
      <slot name="default"></slot>
    </w-vertical>
    <w-horizontal class="dialog-std-foot" height="56">
      <slot name="foot">
        <w-buttonbar width="*" height="*" align="right" gap="10" style="padding-right: 20px">
          <w-button text="保存" @click="save"></w-button>
          <w-button text="取消" @click="close"></w-button>
        </w-buttonbar>
      </slot>
    </w-horizontal>

  </w-dialog>
</template>

<script>
  import $ from '../dfish.js'

  export default {
    props: ['title'],
    data() {
      return {
        fullScreen: false,
      }
    },
    methods: {
      save(e) {
        $(e).cmd('save')
      },
      full() {
        this.fullScreen = !this.fullScreen
      },
      close(e) {
        $.close(e)
      }
    },

    mounted() {
      //console.log(this.$attrs)
    }
  }
</script>

<style>
  .dialog-std {
    background-color: #fff;
  }

  .dialog-std-head {
    background-color: #2398ff;
    color: #fff;
  }

  .dialog-std-title {
    display: flex;
    align-items: center;
    padding-left: 10px;
  }
  
  .dialog-std-max,
  .dialog-std-close {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .dialog-std-close:hover {
    background-color: #D00;
  }

  .dialog-std-foot {
    background-color: #f8f8f8;
  }
</style>
